<script setup>
import { useArticleStore, useChannelStore, useNoPersistStore } from "@/stores";
import { storeToRefs } from "pinia";
import { Edit, Delete, Plus } from "@element-plus/icons-vue";
import { formatTime } from "@/utils/format";
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import { ref } from "vue";
const articleStore = useArticleStore();
const channelStore = useChannelStore();
const noPersistStore = useNoPersistStore();
const { channelList } = storeToRefs(channelStore);
const {
  drawerVisible,
  drawerForm,
  imgUrl,
  articleInfoVisible,
  articleInfo,
  header,
  loading,
} = storeToRefs(noPersistStore);
const { queryForm, articleList, total, form, editorRef } =
  storeToRefs(articleStore);
const {
  getArticles,
  search,
  reset,
  handleDelete,
  handleEdit,
  handleCurrentChange,
  handleSizeChange,
  addArticle,
  uploadImg,
  rules,
  publish,
  viewArticle,
} = articleStore;
getArticles();
</script>

<template>
  <CardPage>
    <template #title>文章管理</template>
    <template #button>
      <el-button type="primary" @click="addArticle">发布文章</el-button>
    </template>
    <!-- 条件查询的表单 -->
    <el-form
      :inline="true"
      :model="queryForm"
      class="demo-form-inline"
      size="large"
    >
      <el-form-item label="文章分类" :model="queryForm">
        <el-select
          placeholder="请选择文章分类"
          clearable
          v-model="queryForm.cate_id"
        >
          <el-option
            v-for="item in channelList"
            :key="item.id"
            :label="item.cate_name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="发布状态">
        <el-select
          placeholder="请选择发布状态"
          clearable
          v-model="queryForm.state"
        >
          <el-option label="已发布" value="已发布" />
          <el-option label="草稿" value="草稿" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="search()">搜索</el-button>
        <el-button @click="reset()">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 文章管理的表格 -->
    <el-table
      style="width: 100%"
      :data="articleList"
      size="large"
      v-loading="loading"
    >
      <el-table-column label="文章标题" prop="title">
        <template #default="{ row }">
          <el-link
            :underline="false"
            type="primary"
            @click="viewArticle(row.id)"
            >{{ row.title }}</el-link
          >
        </template>
      </el-table-column>
      <el-table-column label="文章分类" prop="cate_name"> </el-table-column>
      <el-table-column label="发表时间" prop="pub_date">
        <template #default="{ row }">
          {{ formatTime(row.pub_date) }}
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="state"> </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            circle
            type="primary"
            :icon="Edit"
            plain
            @click="handleEdit(scope.row)"
          ></el-button>
          <el-button
            circle
            :icon="Delete"
            type="danger"
            plain
            @click="handleDelete(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
      <!-- 空状态 -->
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>

    <!-- 文章分页 -->
    <el-pagination
      v-model:current-page="queryForm.pagenume"
      v-model:page-size="queryForm.pagesize"
      :page-sizes="[3, 5]"
      background
      layout="jumper,total, sizes, prev, pager, next "
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 文章添加和编辑的抽屉组件 -->
    <el-drawer v-model="drawerVisible" size="50%">
      <template #header>
        <span>{{ header }}</span>
      </template>
      <template #default>
        <el-form :model="drawerForm" :rules="rules" ref="form">
          <el-form-item label="文章标题" prop="title">
            <el-input
              v-model="drawerForm.title"
              placeholder="请输入文章标题"
            ></el-input>
          </el-form-item>
          <el-form-item label="文章分类" prop="cate_id">
            <el-select
              v-model="drawerForm.cate_id"
              placeholder="请输入文章分类"
            >
              <el-option
                v-for="item in channelList"
                :key="item.id"
                :label="item.cate_name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="文章封面"
            id="uploadItem"
            style="height: 8vw"
            prop="cover_img"
          >
            <!-- 
              此处需要关闭element-plus的文件自动先上传，也不需要配置action等参数
              只需要做前端本地预览即可，不需要在提交前上传图片到服务器
              前端本地预览语法：URL.createObjectURL(...)创建本地预览的地址，来预览
             -->
            <el-upload
              v-model="drawerForm.cover_img"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="uploadImg"
              id="uploadbox"
            >
              <img v-if="imgUrl" :src="imgUrl" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item label="文章内容" style="height: 12vw" prop="content">
            <div class="quillEditor">
              <QuillEditor
                v-model:content="drawerForm.content"
                theme="snow"
                content-type="html"
                ref="editorRef"
              />
            </div>
          </el-form-item>
        </el-form>
        <div id="button">
          <el-button type="primary" @click="publish('已发布')">发布</el-button>
          <el-button @click="publish('草稿')">草稿</el-button>
        </div>
      </template>
    </el-drawer>

    <!-- 展示文章详情的抽屉组件 -->
    <el-drawer v-model="articleInfoVisible" size="50%" id="article">
      <template #header>
        <b>文章预览</b>
      </template>
      <template #default id="info" :model="articleInfo">
        <h1>{{ articleInfo.title }}</h1>
        作者：<span>{{ articleInfo.nickname }}</span> 发布时间:
        <span>{{ formatTime(articleInfo.pub_date) }}</span> 文章分类:
        <span>{{ articleInfo.cate_name }}</span>
        <hr />
        <el-upload
          v-model="articleInfo.cover_img"
          :show-file-list="false"
          :auto-upload="false"
          id="showImg"
        >
          <img :src="articleInfo.cover_img" class="avatar" />
        </el-upload>
        {{ articleInfo.content }}
      </template>
    </el-drawer>
  </CardPage>
</template>

<style scoped>
#article b {
  font-weight: normal;
}
#article span {
  margin-right: 1vw;
}
#showImg {
  width: 20vw;
  height: 15vw;
  border: 0.1vw dashed gray;
  margin-bottom: 2vw;
  border-radius: 0.3vw;
  cursor: pointer;

  position: relative;
  overflow: hidden;
}

.el-form .el-form-item {
  width: 15vw;
}
.el-pagination {
  margin: 3vw 50vw;
}

.el-drawer .el-form {
  padding: 1vw;
}
.el-drawer .el-form .el-form-item {
  width: 100%;
  height: 2vw;
  display: flex;
}

.el-drawer .el-input,
.el-drawer .el-select {
  width: 90%;
  height: 100%;
}

#uploadbox {
  width: 8vw;
  height: 8vw;
  border: 0.1vw dashed gray;
  border-radius: 0.3vw;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
#uploadbox:hover {
  border-color: #409eff;
}

#uploadbox .avatar {
  width: 8vw;
  height: 8vw;
  display: block;
}

#uploadbox .el-icon.avatar-uploader-icon {
  font-size: 1vw;
  color: #8c939d;
  width: 8vw;
  height: 8vw;
  text-align: center;
}
.quillEditor {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.el-drawer #button {
  width: 11vw;
  height: 2vw;
  display: flex;
  justify-content: space-between;
  margin-left: 5vw;
}
#button button {
  width: 5vw;
  height: 100%;
}
</style>
